<template>
  <div>
    <h1>App</h1>
    <p>count:{{ $store.state.count }}</p>
    <p>count:{{ count }}</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
/* import store from "./stores";
console.log(store); */
export default {
  name: "App",
  mounted() {
    console.log(this, "app");

    //mapState的使用，参数是一个数组，数组内是我们要去store拿的值。
    //mapState返回一个对象，对象内部其实就是读取值的对应的计算属性的方法。
    const result = mapState(["count", "num"]);
    console.log(result);
    //我们在测试的时候，直接调用count方法，因为this不是指向组件实例，所以看不出来效果。
    //我们可以强制的把count方法中的this改为组件实例，可以看到结果。
    // console.log(result.count.apply(this));
  },
  /* computed: {
    //获取state中count的值
    count() {
      return this.$store.state.count;
    },
    num() {
      return this.$store.state.num;
    },

  }, */

  // computed: mapState(["count", "num"]),
  computed: {
    ...mapState(["count", "num"]),
    //.....
  },
};
</script>

<style></style>
